<template>
  <div id="talkDiscussBox">
    <!-- 卡片总区域 -->
    <div class="dis_box">
      <!-- 卡片标题区域 -->
      <div class="dis_title_box">
        <!--<div class="dis_title">有哪些软件堪称神器，却不为大众所知？</div>-->
        <div class="dis_title">{{cardList.title}}</div>
      </div>
      <!-- 卡片中间内容区域 文章收缩 -->
      <div class="card_body_box_close">
        <!-- 中间坐边图片区域 -->
        <div class="img_box">
          <img class="card_body_left_img"/>
        </div>
        <!-- 中间右边文章内容部分显示区域 -->
        <div class="card_body_right_box">
          <p class="card_content_text">
            这种问题，又引来了一大批知友内存告急。作为小程序从业人员，这里推荐十款好用但相对小众的优质小程序，不用下载APP解救你的手机内存。也欢迎大家评论区留言补充...
          </p>
          <div class="btn_open">阅读全文 ↓</div>
        </div>
      </div>
      <!-- 卡片中间内容区域 文章全部显示的 -->
      <!--<div class="card_body_box_open"></div>-->
      <!-- 卡片下边用户操作区域 -->
      <div class="card_function_box">
        <!-- 点赞按钮 -->
        <div class="btn_voteGood" @click="doChangeGood">
          <span v-if="!cardList.isGood">赞同</span>
          <span v-if="cardList.isGood">已赞同</span>
          {{cardList.goodNum}}
        </div>
        <!-- 取消点赞按钮 -->
        <div class="btn_voteBad" @click="doChangeBad">
          <span v-if="!cardList.isBad">踩</span>
          <span v-if="cardList.isBad">已踩</span>
          {{cardList.badNum}}
        </div>
        <!-- 评论按钮 -->
        <div class="btn_comment"><span>{{cardList.commentNum}}条评论</span></div>
        <!-- 分析按钮 -->
        <div class="btn_analysis"><span>分享</span></div>
        <!-- 收藏按钮 -->
        <div class="btn_collection"><span>收藏</span></div>
        <!-- 收缩文章按钮 -->
        <!--<div class="btn_close" v-if="isOpen" @click="isOpen=!isOpen">收起 ↑</div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'talkDiscussBox',
  /*el: '#talkDiscussBox',*/
  components: {
  },
  data () {
    return {}
  },
  props: ['cardList'],
  computed: {
  },
  methods: {
    doChangeGood () {
      if (this.cardList.isGood) {
        this.cardList.goodNum--
      } else {
        this.cardList.goodNum++
      }
      this.cardList.isGood = !this.cardList.isGood
      if (this.cardList.isBad) {
        this.cardList.badNum--
      }
      this.cardList.isBad = false
    },
    doChangeBad () {
      if (this.cardList.isBad) {
        this.cardList.badNum--
      } else {
        this.cardList.badNum++
      }
      this.cardList.isBad = !this.cardList.isBad
      if (this.cardList.isGood) {
        this.cardList.goodNum--
      }
      this.cardList.isGood = false
    }
  }
}
</script>

<style scoped>
  @import '../../../../../../static/css/talk/talkDiscussBox.css';
</style>
